@charset "utf-8";
@import "reset";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    >header {
        width: 100%;
        height: r(92);
        position: absolute;
        top: 0;
        background: #f7f7f7;
        margin: 0 auto;
        border-bottom: r(1) solid #c1c1c1;
        padding: 0 r(20);
        .img{
            float: left;
            margin-top: r(25);
            width: r(22);
            height: r(37);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .nav {
            width: 100%;
            height: r(92);
            line-height: r(92);
            margin: 0 auto;
            ul {
                padding-left: r(100);
                li {
                    display: inline-block;
                    width: r(100);
                    height: r(92);
                    text-align: center;
                    margin-right: r(40);
                    a {
                        letter-spacing: r(3);
                        font-size: r(35);
                        color: #333333;
                    }
                }
                li.active {
                    border-bottom: r(4) solid #cc3333;
                    a {
                        color: #cc3333;
                    }
                }
                li:nth-child(3) {
                    border-right: 0;
                }
            }
        }
        .letter {
            float: right;
            line-height: r(92);
            p {
                font-size: r(30);
                color: #666666;
            }
        }
    }
    #big {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        display: none;
        .click {
            position: absolute;
            top: 0;
            right: 0;
            width: r(530);
            height: 100%;
            margin: 0 auto;
            background: #FFFFFF;
            z-index: 999;
            .first {
                width: 100%;
                height: r(200);
                padding: r(20);
                border-bottom: r(1) solid #e0e0e0;
                >.img {
                    width: r(159);
                    height: r(159);
                    margin-right: r(16);
                    border: 1px solid #d7d7d7;
                    img {
                        width: r(157);
                        height: r(157);
                    }
                }
                >.text {
                    p:nth-child(1) {
                        font-size: r(28);
                        color: #333333;
                    }
                    p:nth-child(2) {
                        font-size: r(30);
                        color: #cc3333;
                        line-height: r(55);
                    }
                    p:nth-child(3) {
                        font-size: r(24);
                        color: #999999;
                    }
                }
            }
            .select {
                width: 100%;
                height: r(325);
                font-size: r(28);
                color: #666666;
                padding-top: r(25);
                span {
                    float: left;
                    display: inline-block;
                    margin-left: r(40);
                    width: r(80);
                    height: r(300);
                }
                label {
                    padding: r(5) r(20);
                    border: 1px solid #d7d7d7;
                    border-radius: r(5);
                    margin-bottom: r(10);
                    font-size: r(26);
                    
                }
                input {
                        
                        display: none;
                    }
                .ggg{
                    border-color: red;
                }
            }
            .num {
                height: r(48);
                line-height: r(50);
                font-size: 0;
                span {
                    display: inline-block;
                    margin-left: r(40);
                    width: r(80);
                    height: r(50);
                    font-size: r(28);
                    color: #666666;
                }
                .Quantity_purchased {
                    width: r(180);
                    height: r(50);
                    input {
                        width: r(100);
                        height: r(100);
                        text-align: center;
                        font-size: r(20);
                    }
                    #z {
                        width: r(200);
                        height: r(200);
                        border: 0;
                    }
                    #zr {
                        border: 0;
                        font-size: r(40);
                    }
                    #zl{
                        font-size: r(40);
                    }
                }
            }
            .foot {
                width: 100%;
                height: r(100);
                font-size: 0;
                margin-top: r(330);
                button {
                    width: 50%;
                    height: r(100);
                    background: #e7a312;
                    color: #FFFFFF;
                    font-size: r(35);
                    text-align: center;
                }
                #agg {
                    background: #cc3333;
                }
            }
        }
    }
    >section {
        width: 100%;
        position: absolute;
        top: r(92);
        bottom: r(100);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .product {
            width: r(640);
            height: r(640);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .introduction {
            width: 100%;
            height: r(252);
            padding: r(30) r(20) 0 r(24);
            border-top: r(1) solid #e0e0e0;
            >div {
                margin-bottom: r(20);
                p {
                    line-height: r(40);
                    font-size: r(30);
                    color: #333333;
                }
                a {
                    float: right;
                    font-size: r(60);
                    color: #c0c0c0;
                }
            }
            p {
                line-height: r(50);
                font-size: r(28);
                color: red;
            }
            p:first-of-type {
                span {
                    font-size: r(30);
                    color: #cc3333;
                }
            }
            p:last-of-type {
                span {
                    color: red;
                }
            }
        }
        .other {
            width: 100%;
            height: r(97);
            line-height: r(97);
            padding: 0 r(20);
            border-top: r(1) solid #e0e0e0;
            p {
                font-size: r(28);
                color: #999999;
                span {
                    color: #333333;
                }
            }
            a {
                float: right;
                font-size: r(60);
                color: #c0c0c0;
            }
            p:last-child {
                font-size: r(24);
            }
        }
        .hr {
            width: 100%;
            height: r(22);
            background: #f3f4f6;
            border-top: r(1) solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }
        .attention {
            width: 100%;
            height: r(368);
            padding: r(20);
            .top {
                margin-bottom: r(20);
                .logo {
                    width: r(95);
                    height: r(95);
                    margin-right: r(22);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .text {
                    line-height: r(50);
                    p:first-child {
                        font-size: r(30);
                        color: #333333;
                    }
                    p:last-child {
                        font-size: r(24);
                        color: #999999;
                    }
                }
                .a {
                    font-size: 0;
                    padding-top: r(15);
                    a:first-child {
                        display: inline-block;
                        width: r(115);
                        height: r(50);
                        line-height: r(50);
                        text-align: center;
                        border: 1px solid #e1e1e1;
                        border-radius: r(6);
                        background: #83d050;
                        font-size: r(24);
                        color: #FFFFFF;
                        vertical-align: middle;
                        margin-right: r(22);
                    }
                    a:last-child {
                        font-size: r(60);
                        color: #bfbfbf;
                        vertical-align: middle;
                    }
                }
            }
            .middle {
                width: 100%;
                height: r(110);
                margin-bottom: r(27);
                .m1 {
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    padding-top: r(18);
                    p:first-child {
                        font-size: r(28);
                        color: #333333;
                        margin-bottom: r(6);
                    }
                    p:last-child {
                        font-size: r(24);
                        color: #999999;
                    }
                }
                .left {
                    width: r(182);
                    border-right: r(1) solid #dddddd;
                }
                .center {
                    width: r(198);
                    border-right: r(1) solid #dddddd;
                }
                .right {
                    width: r(220);
                    p {
                        img {
                            width: r(28);
                            height: r(30);
                            float: right;
                        }
                    }
                    p:first-child {
                        font-size: r(24);
                        color: #999999;
                    }
                }
            }
            .foot {
                font-size: 0;
                a {
                    display: inline-block;
                    width: r(290);
                    height: r(65);
                    line-height: r(65);
                    border: r(1) solid #d1d1d1;
                    border-radius: r(6);
                    font-size: r(26);
                    color: #333333;
                    text-align: center;
                }
                a:first-child {
                    margin-right: r(20);
                }
            }
        }
        .pull {
            width: 100%;
            height: r(99);
            line-height: r(99);
            text-align: center;
            p {
                font-size: r(30);
                color: #999999;
                vertical-align: middle;
                a {
                    font-size: r(60);
                    color: #bfbfbf;
                    margin-right: r(13);
                    vertical-align: middle;
                    transform: rotate(-90deg);
                    display: inline-block;
                }
            }
        }
        .back-top {
            position: fixed;
            right: r(20);
            bottom: r(150);
            a {
                display: inline-block;
                width: r(80);
                height: r(80);
                background: url(../img/top.png) no-repeat;
                background-size: 100%;
            }
        }
    }
    >footer {
        width: 100%;
        height: r(100);
        position: absolute;
        bottom: 0;
        border-top: 1px solid #c1c1c1;
        .left {
            width: r(296);
            height: 100%;
            background: #f8f8f8;
            ul {
                li {
                    padding-top: r(17);
                    margin-left: r(34);
                    a {
                        img {
                            width: r(42);
                            height: r(42);
                        }
                        p {
                            font-size: r(20);
                            color: #333333;
                        }
                    }
                }
                li:nth-child(2) {
                    margin-left: r(47);
                }
                li:nth-child(3) {
                    margin-left: r(44);
                }
            }
        }
        .middle {
            width: r(204);
            height: 100%;
            background: #cc3333;
            a {
                display: inline-block;
                width: 100%;
                height: 100%;
                line-height: r(100);
                text-align: center;
                font-size: r(35);
                color: #FFFFFF;
            }
        }
        .right {
            width: r(140);
            height: 100%;
            background: #e7a312;
            a {
                display: inline-block;
                width: 100%;
                height: 100%;
                line-height: r(100);
                text-align: center;
                font-size: r(35);
                color: #FFFFFF;
            }
        }
    }
}
.yuan{
    color: red;
}
.like{
    width: 100%;
    height: r(840);
    background: white;
   
    .link1{
        width: 100%;
        height: r(86);
        line-height: r(86);
        color: #999999;
         padding-left: r(20);
//      border-bottom: r(1) solid #999999;
    }
    .like2{
        width: r(213);
        height: r(345);
        border: r(1) solid #BFBFBF;
        padding: r(20)  r(20)  r(20)  r(20);
        .img1{
            display: inline-block;
            width: 100%;
            height: r(176);
            img{
                width: 100%;
                height: 100%;
            }
            
        }
        p{
                font-size: r(22);
                color: #8f8f8f;
            }
            .like3{
                font-size: r(22);
                color:#cc3333;
            }
            .img2{
                display: inline-block;
                width: r(44);
                height: r(44);
                margin-left: r(15);
                margin-top: r(10);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
    }
   #love{
       width: 100%;
       height: r(686);
   } 
   .like_one{
        height: r(2);
        width: r(146);
        margin-left: r(250);
 
        margin-top:r(30) ;
        ul{
            li{
                float: left;
                margin-left: r(2);
                margin-right: r(2);
                width: r(30);
                height: r(2);
                background: #696969;
            }
        }
        li:hover{
            height: r(4);
            background: red;
        }
    }
}
 